<template>
  <div>
    <h3>修饰符</h3>

<!-- (v-bind:) 
    .prop - 作为一个 DOM property （可被js更改的动态属性）绑定而不是作为 attribute （html本身的静态属性）绑定。(差别在哪里？)
    .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。在使用 DOM 模板时将 v-bind property 名称驼峰化，在 Vue 3.x 中已被移除。
    .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
-->

      <!-- <div v-bind:text-content.prop="text"></div> -->

    <!-- .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。在使用 DOM 模板时将 v-bind property 名称驼峰化， -->
      <!-- <svg :view-box.camel="viewBox"></svg> -->

    <!-- .sync  在父组件定义自定义属性传值的时候，同时也注册了一个同名的自定义事件并监听。vue3中被v-model包含了 -->
      <!-- <SonTest :bindSync.sync="bindSync"></SonTest> -->
      <!-- <SonTest :bindSync="bindSync" @update:bindSync="(val)=> {bindSync = val}"></SonTest> -->

<!-- ============================================== 事件修饰符 (v-on) ================================================== -->
<!-- ============================================== 事件修饰符 (v-on) ================================================== -->
<!-- 事件修饰符 (v-on)
    .stop	阻止单击事件继续传播冒泡		
    .prevent	取消默认行为		
    .self	只有绑定了事件的元素本身才能触发该事件，即不能是他的内部元素冒泡触发
    .once 	事件只执行一次,还可以使用在组件的自定义事件上	
    .capture	添加事件侦听器时使用 capture(捕获) 模式。
    .passive  告诉浏览器不想阻止事件默认行为。尤其能够提升移动端的性能。不要把.passive和.prevent一起使用      
    .native   监听组件根元素的原生事件。  
 -->

      <!-- 停止冒泡 -->
       <button @click.stop="onFn">停止冒泡(.stop)</button>
      <!-- 阻止默认行为 -->
      <button @click.prevent="onFn">阻止默认行为(.prevent)</button>
      <!--  串联修饰符 -->
      <button @click.stop.prevent="onFn">串联修饰符(.stop.prevent)</button>
      <!-- 点击回调只会触发一次 -->
      <button v-on:click.once="onFn">点击回调只会触发一次(.once)</button>
      <!-- 添加事件监听器时使用事件捕获模式 -->
      <button @click.capture="onFn">添加事件监听器时使用事件捕获模式(.capture)</button>
      <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
      <button @click.self="onFn">只当事件在该元素本身（而不是子元素）触发时触发回调(.self)</button>
      <!-- 不想阻止事件默认行为。不要把.passive和.prevent一起使用 -->
      <button @click.passive="onFn">不想阻止事件默认行为(.passive)</button>
      <!-- `.native` - 监听组件根元素的原生事件。 -->
      <!-- <SonTest @click.native="onFn">监听组件根元素的原生事件(.native) </SonTest> -->

<!-- ============================================== 表单修饰符： ================================================== -->
<!-- ============================================== 表单修饰符： ================================================== -->
<!-- 表单修饰符：
  .number输入的值转换成数字类型 
  .trim消除首尾输入的空格 
  .lazy把input事件改成change事件 
-->

    <input type="number" name="num" id="" v-model.lazy="modelVal">


<!-- ============================================== 按键修饰符 ================================================== -->
<!-- ============================================== 按键修饰符 ================================================== -->
<!-- 按键修饰符
   .enter .tab .delete (捕获“删除”和“退格”键) .esc .space	  .up .down .left .right
-->

<!-- ============================================== 系统按键修饰符 ================================================== -->
<!-- ============================================== 系统按键修饰符 ================================================== -->
<!-- 系统按键修饰符       触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。
    .ctrl .alt .shift .meta
-->

<!-- ============================================== 鼠标按键修饰符 ================================================== -->
<!-- ============================================== 鼠标按键修饰符 ================================================== -->
<!-- 鼠标按键修饰符
    .left	.right	.middle
-->

<!-- ============================================== 自定义修饰符 ================================================== -->
<!-- ============================================== 自定义修饰符 ================================================== -->
<!-- 自定义修饰符： -->

  </div>
</template>

<script>
import SonTest from './SonTest.vue';
  export default {
      components: {SonTest},
      props:["value"],  //一定要是这个属性，因为父组件那边的v-model默认绑定的属性就是value
      data(){
         return {
          modelVal: "",
          bindSync: 1,       //.sync修饰符
         }
      },
      methods: {
        onFn(event, val) {
          console.log(event, val);
        },
      }
  }
</script>
<style lang='less' scoped>

</style>